.box {
	height: 100%;
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;
	&__header {
		text-align: center;
		display: flex;
		align-items: center;
		width: 100%;
		height: 170upx;
		background: #fff;
		border-top: 1px solid #ddd;
		font-size: $uni-font-size-lg;
		justify-content: center;
	}
	&__body {
		padding-top: 60upx;
		box-sizing: border-box;
		height: 200upx;
		.password-box {
			height: 90upx;
			text-align: center;
			box-sizing: border-box;
			.password-item {
				height: 100%;
				border: 1px solid #00c456;
				border-radius: 15upx;
				width: 540upx;
				margin: 0 auto;
				box-shadow: 0 0 3px rgba(0, 196, 86, .6);
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				&-char {
					width: 16.66666666%;
					height: 90upx;
					border-right: 1px solid #ddd;
					line-height: 90upx;
					text-align: center;
					&:last-child {
						border-right: none;
					}
					&__dot {
						height: 90upx;
						&:after {
							content: '●';
						}
					}
				}
			}
		}
	}
	.keyboard {
		position: fixed;
		bottom: 0;
		height: 480upx;
		width: 100%;
		border-top: 1px solid #ddd;
		background: #fff;
		display: flex;
		flex-direction: row;
		.number {
			display: flex;
			flex-wrap: wrap;
			width: 75%;
			list-style: none;
			padding: 0 0 0 1px;
			margin: 0;
			border-right: 1px solid #ddd;
			.button {
				margin: 0;
				padding: 0;
				width: 33%;
				height: 120upx;
				text-align: center;
				line-height: 100upx;	
				border-right: 0.5px solid #ddd;
				border-bottom: 0.5px solid #ddd;
				
				&:nth-child(3),
				&:nth-child(6),
				&:nth-child(9),
				&:nth-child(12) {
					border-right: none;
				}
				
				&:nth-child(10),
				&:nth-child(11),
				&:nth-child(12) {
					border-bottom: none;
				}
				&:nth-child(11) {
					font-size: $uni-font-size-lg;
					font-weight: bold;
				}
				
				&:active {
					background: #ddd;
				}
			}
			.down:after {
				content: '\f11c';
				font-family: 'FontAwesome';
				font-size: 30px;
			}
		}
		.action {
			width: 25%;
			display: flex;
			position: relative;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.delete {
				height: 50%;
				width: 100%;
				position: absolute;
				top:0;
				border-bottom: 1px solid #ddd;
				background: #ddd;
				&:after {
					content: '\f00d';
					font-family: 'FontAwesome';
					text-align: center;
					width: 100%;
					height: 100%;
					line-height: 100%;
					font-size: 30px;
					display: block;
					line-height: 240upx;
				}
				&:active {
					background: #fff;
				}
			}
			.ok {
				// flex: 1;
				position: absolute;
				bottom:0;
				height: 50%;
				width: 100%;
				&:after {
					content: '\f00c';
					font-family: 'FontAwesome';
					width: 100%;
					height: 100%;
					line-height: 100%;
					text-align: center;
					font-size: 30px;
					display: block;
					line-height: 240upx;
				}
				&:active {
					background: #ddd;
				}
			}
		}
	}
}

/*动画*/
@keyframes slidedown {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(100%);
	}
}
.slidedown {
	animation: slidedown 0.3s linear;
	transform: translateY(100%);
}
.slideup {
	animation: slideup 0.3s linear;
	transform: translateY(0);
}
@keyframes slideup {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0);
	}
}